import React, { useEffect, useState } from 'react'
import '../../index.scss'
import TitleHead from "../../component/TitleHead"
import ContentList from "../../component/ContentList"
import ListChildren from "../../component/ListChildren"
import { useTranslation } from 'react-i18next';
<<<<<<< HEAD
import instance from '../../utils/request'
import { ListItem } from '../../utils/type'
import {useNavigate} from "react-router-dom"

=======
>>>>>>> wanghengda
const Mock = require("mockjs")
const lists = Mock.mock({
  "list|8": [
    {
      "title|+1": ['你说', '后端', 'android', 'ios', '人工智能', '开发工具', '代码人生', '阅读'],
      children: [
        {
          pp: "fag"
        }
      ]
    }
  ]
})


const arrs = [
  {
    pp: 'wergh 中文文档 🎉'
  }, {
    pp: 'react-指北你真的会用hooks嘛-中篇--了解真相'
  },
  {
    pp: "牛客面经-每日一结"
  }
]

type Props = {}

const File = (props: Props) => {
<<<<<<< HEAD
  const [list, setlist] = useState([])
  const [datas,setdatas]=useState([])
  const navgate=useNavigate()
  useEffect(() => {
    instance.get("https://bjwz.bwie.com/wipi/api/article/recommend").then(res => {
      
      setlist(res.data.data)
    })
    instance.get("https://bjwz.bwie.com/wipi/api/category?articleStatus=publish").then(res=>{
      console.log(res.data.data);
      setdatas(res.data.data)
    })
  }, [])
  console.log(list);
  console.log(datas);
  
=======
>>>>>>> wanghengda

  const { t, i18n } = useTranslation();
  return (

    <div className="Active_box">
<<<<<<< HEAD
=======
      <pre dangerouslySetInnerHTML={{__html:"<p>fafafd</p><div>lalala</div>"}}></pre>
>>>>>>> wanghengda

      <div className="main">
        <div className="container">
          <div className="container_content">
            <div className="container_content_left">
              <div className="container_content_left_minbox">
                <div className="container_content_left_minbox_topbox">
                  <p><span>{t('Archives')}</span></p>
<<<<<<< HEAD
                  <p className='p1_text'>{t("Total")}<b className='bss'>3</b>{t("count")}</p>
=======
<<<<<<< HEAD
                  <p className='p1_text'>{t("Total")}<b className='bss'>3</b>{t("count")}</p>
=======
                  <p className='p1_text'>{t("Total")}<b className='bss'>5</b>{t("count")}</p>
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409

                </div>
                <h2>2022</h2>

                <div className="container_content_left_minbox_buttombox">
                  <h3>others</h3>
<<<<<<< HEAD
                  {
                    list.length ? list.map((item: ListItem, index: number) => {
                      return <ul className='uls' key={index}>
                          <li onClick={()=>{ 
                            navgate(`/home/datils/${item.id}`)
                            localStorage.setItem("datils_obj",JSON.stringify(item))
                            }}>{item.title}</li>
                      </ul>
                    }):""
                  }

=======
                  <ul className='uls'>
                    <li><span>10-11</span>小猪佩奇</li>
                    <li><span>10-12</span>迪迦</li>
                    <li><span>10-13</span>小猪佩奇</li>
                    <li><span>10-12</span>小猪佩奇</li>
                    <li><span>10-12</span>小猪佩奇</li>
                    <li><span>10-11</span>小猪佩奇</li>
                  </ul>
>>>>>>> wanghengda
                </div>

              </div>
            </div>
            <div className="container_content_right">
              <div className="container_content_right_topbox">

                <TitleHead titles={t("Recommended Readings")}></TitleHead>
<<<<<<< HEAD
                <ContentList Arrs={list}></ContentList>
=======
                <ContentList Arrs={arrs}></ContentList>
>>>>>>> wanghengda
              </div>
              <div className="container_content_right_buttombox">

                <TitleHead titles={t("Tags")}></TitleHead>
<<<<<<< HEAD
                <ListChildren lists={datas}></ListChildren>
=======
                <ListChildren lists={lists.list}></ListChildren>
>>>>>>> wanghengda

              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  )
}

export default File